<template>
  <div class="item-p">
    <chart :options="bar" :init-options="initOptions" ref="bar" theme="ovilia-green" autoresize />
  </div>
</template>
<script>
import ECharts from "@/components/echarts/ECharts.vue";

export default {
  components: {
    chart: ECharts
  },
  props: {
    data: {
      type: Array,
      default: []
    },
    title: {
      type: String,
      default: ""
    }
  },
  watch: {
    data(newVal, oldVue) {
      this.init();
    }
  },
  data() {
    return {
      bar: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "0%",
          right: "15%",
          top: "15%",
          bottom: "30%", //修改柱状图的大小
          containLabel: true
        },
        xAxis: [
          {
            show:false, //隐藏刻度标签 
            type: "value",
            axisLabel:{ //隐藏X轴文字
              show:false
            },
            splitLine:{
              show:false
            }
          }
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,//从小到大或者从到大到小排序
            data: [],
            axisLabel: {
              //用于设置是否显示y轴下的字体 默认为true
              show: true,
              color:'#fff',
              fontSize: 12
            },
            splitLine:{
              show:false
            }
          }
        ],
        series: [
          {
            name: this.title,
            type: "bar",
            label: {
              normal: {
                show: true,
                // textBorderColor: "#fff", //字体背景色
                // textBorderWidth: 2,      //字体背景宽度
                position:[350,5],          //position:[字体X轴, 字体Y轴],
                // position:'right',       //字体位置
                color:'#fff'
              }
            },
            data: []
          }
        ]
      },
      initOptions: {
        renderer: "canvas"
      }
    };
  },
  methods: {
    init() {
      let barArr = [];
      let yAxisData = [];
      this.data.forEach(item => {
        let list = {
          value: item.value,
          name: item.name,
          itemStyle: {
            normal: { color: item.color }
          }
        };
        yAxisData.push(item.name);
        barArr.push(list);
      });
      this.bar.series[0].data = barArr;
      this.bar.yAxis[0].data = yAxisData;
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style scoped>
.item-p {
  width: 100%;
  height: 100%;
}
</style>